<template>
  <div class="login">

    <el-row>
      <el-col :xs="0" :sm="12">10</el-col>
      <el-col :xs="24" :sm="12">
        <div class="login-form">
          <h2>Hello 您好</h2>
          <p>欢迎来到运营平台</p>
          <!--ref="form"-->
          <el-form ref="loginRef" :model="form" :rules="rules" label-width="0px">
            <el-form-item prop="username">
              <el-input v-model="form.username" placeholder="请输入">
                <template #prefix>
                  <el-icon class="el-input__icon">
                    <User />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="form.password" placeholder="请输入"
                        :show-password="true">
                <template #prefix>
                  <el-icon class="el-input__icon">
                    <Lock />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <!--TODO-todo: button没有fill属性，自己定义组件吧-->
              <el-button type="primary" :loading="isLoading" @click="handleLogin" style="width: 100%;">登录</el-button>
            </el-form-item>
          </el-form>

        </div>
      </el-col>
    </el-row>

  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import useLoginStore from '@/store/modules/login.ts'
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router'
import { getTime } from '@/utils/dateFormat.ts'
import { checkUsername } from '@/utils/validator.ts'

const store = useLoginStore()
console.log('login的store', store)
const $router = useRouter()
const form = reactive({
  username: 'admin',
  password: '111111'
})
const rules= {
  username: [
    // {required:true,message:'请输入账号',trigger: 'change'},
    // {min:3,max:6,message:'长度在3-6未',trigger: 'change'},
    { validator: checkUsername, trigger: 'change'}
  ],
  password: [
    {required:true,message:'请输入密码',trigger: 'change'}
  ],
}
const isLoading = ref(false)
const loginRef = ref()
const handleLogin = async () => {
  // validate是一个promise。resolve会执行下面。如果reject，就报错，不会往下走了
  await loginRef.value.validate()
  isLoading.value = true
  try {
    // 接口在store中调用
    const res = await store.login(form)
    console.log('login.vue-res:', res)
    await $router.push('/')
    ElNotification.success({
      title: `Hi，${getTime()}好`,
      message: '登录成功'
    })
  } catch (error) {
    console.log('error:', error) // 有message的内容，可以获取到信息
    // 类型断言
    ElNotification.error((error as Error).message)
  } finally {
    isLoading.value = false
  }
}
</script>


<style scoped lang="scss">
.login {
  height: 100vh;
  background: url('@/assets/images/background.jpg') no-repeat;
  background-size: cover;

  .login-form {
    width: 60%;
    top: 30vh;
    position: relative;
    //background: #fff;
    color: #FFF;
    background: url(@/assets/images/login_form.png) no-repeat;
    background-size: cover;
    padding: 40px;
    margin: 0 auto;

    h2 {
      font-size: 40px;
    }

    p {
      font-size: 20px;
      margin: 20px 0;
    }
  }
}
</style>
